<template>
  <div>
    <a-row :gutter="12">
      <a-col :span="6">
        <a-form-item class="relative">
          <template #label>
            <div class="text-nowrap mr-2">{{ t["资源"] }}</div>
          </template>
          <input v-model="data.url" />
          <a-button v-if="!data.url" @click="upload">{{ t["上传"] }}</a-button>
          <template v-else>
            <div class="resource relative">
              <img :src="`${data.url}?r=${Math.random()}`" height="60px" />
              <video :src="`${data.url}?r=${Math.random()}`" height="60px"></video>
            </div>
          </template>
          <div class="absolute close">
            <IconClose v-if="data.url" @click="data.url = ''" />
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="7">
        <a-form-item>
          <template #label>
            <div class="text-nowrap mr-2">{{ t["名称"] }}</div>
          </template>
          <a-input v-model="data.name" allow-clear />
        </a-form-item>
      </a-col>
      <a-col :span="7">
        <a-form-item>
          <template #label>
            <div class="text-nowrap">{{ t["时间"] }}</div>
          </template>
          <a-input-number v-model="data.second" allow-clear />
        </a-form-item>
      </a-col>
      <a-col :span="3">
        <a-button @click="del">
          <IconDelete />
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
const t = translate("公共模块");
const emit = defineEmits(["upload", "del"]);

type Data = {
  second: number;
  name: string;
  url: string;
};
const data = ref<Data>({
  second: 0,
  name: "",
  url: ""
});
const upload = () => {
  emit("upload");
};
const del = () => {
  emit("del");
};
const props = defineProps<{
  value: Data;
}>();

watch(
  props,
  () => {
    data.value = props.value;
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
input {
  border: 1px solid #000;
  opacity: 0;
  position: absolute;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  background-color: #b1b0b09f;
  padding: 0 4px;
}
.resource {
  height: 60px;
  img,
  video {
    position: absolute;
  }
}
</style>
